<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾 defineProperty 方法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        let number = 18;
        let person = {
            name: '张三',
            sex: '男'
        };
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true, // 控制属性是否可以被枚举，默认值是 false
            // writable: true, // 控制属性是否可以被修改，默认值是 false
            // configurable: true, // 控制属性是否可以被删除，默认值是 false

            // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get: function () {
                console.log("有人读取了 age 属性");
                return number;
            },
            // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set: function (value) {
                console.log("有人修改了 age 属性，且值是", value);
                number = value;
            }
        });

        console.log('@' , Object.keys(person));
        console.log(person);
    </script>
</body>
</html>